<template>
  <div class="goods-list-page">
    <nav-bar @onLeftClick='onLeftClick'
             pageName='商品列表'>
      <template v-slot:nav-right>
        <img :src="selectlayoutTypeData.icon"
             @click="onLayoutTypeClick(selectlayoutTypeData.type)">
      </template>
    </nav-bar>
    <div class="goods-list-page-content">
      <goods-options @onOptionsItemClick='onOptionsItemClick'></goods-options>
      <goods :dataSource='sortDataSource'
             v-if="dataSource.length"
             :layoutType='selectlayoutTypeData.type'
             :isScroll='true'
             @onGoodsItemClick='onGoodsItemClick'>
      </goods>
    </div>
    <cover @onClose='onClose'
           v-show="showToast"
           :zIndex="100">
      <div class="toast">
        暂无该商品
      </div>
    </cover>
  </div>
</template>
<script>
import NavBar from '@c/currency/NavigationBar.vue'
import GoodsOptions from '@c/goods/GoodsOptions.vue'
import Goods from '@c/goods/Goods.vue'
import Cover from '@c/currency/Cover.vue'
export default {
  name: 'goodsList',
  data () {
    return {
      dataSource: [],
      sortDataSource: [],
      layoutTypeDatas: [
        {
          type: '1',
          icon: require('@img/list-type.svg')
        },
        {
          type: '2',
          icon: require('@img/grid-type.svg')
        },
        {
          type: '3',
          icon: require('@img/waterfall-type.svg')
        }
      ],
      selectlayoutTypeData: {},
      showToast: false
    }
  },
  activated () {
    console.log('activated')
  },
  components: {
    NavBar,
    GoodsOptions,
    Goods,
    Cover
  },
  methods: {
    onLeftClick () {
      this.$router.go(-1)
    },
    getGoodsDatas () {
      this.$http.all([this.$http.get('/goods')]).then(this.$http.spread(goodsData => {
        this.dataSource = goodsData.data.list
        this.onOptionsItemClick('1')
      }))
    },
    onLayoutTypeClick (type) {
      switch (type) {
        case '1':
          this.selectlayoutTypeData = this.layoutTypeDatas[1]
          break;
        case '2':
          this.selectlayoutTypeData = this.layoutTypeDatas[2]
          break;
        case '3':
          this.selectlayoutTypeData = this.layoutTypeDatas[0]
          break;
      }
    },
    onOptionsItemClick (id) {
      /** ID的值为：
       * 1、默认排序
       * 1-2、价格由高到底
       * 1-3、销量由高到底
       * 2、有货优先
       * 3、直营优先
       */
      switch (id) {
        case '1':
          this.sortDataSource = this.dataSource.slice(0)
          break;
        case '1-2':
          this.getSortGoodsDataFromKey('price')
          break;
        case '1-3':
          this.getSortGoodsDataFromKey('volume')
          break;
        case '2':
          this.getSortGoodsDataFromKey('isHave')
          break;
        case '3':
          this.getSortGoodsDataFromKey('isDirect')
          break;
      }
    },
    /**
     * sort排序，默认按照升序排序
     * sort接受两个参数，假如a1,a2
     * a1总是在a2的后面
     * 当回调函数返回1表示不换顺序，如果返回-1表示要换顺序
     * sort方法会修改原来数组
     * slice和concat方法不会修改原来数组，当数组里面是基本数据类型的时候可以进行深赋值
     */
    getSortGoodsDataFromKey (key) {
      this.sortDataSource.sort((good1, good2) => {
        let v1 = good1[key]
        let v2 = good2[key]
        if (typeof v1 === 'boolean') {
          if (v1) {
            return -1
          }
          if (v2) {
            return 1
          }
          return 0
        }
        if (parseFloat(v1) >= parseFloat(v2)) {
          return -1
        }
        return 1
      })
    },
    onGoodsItemClick (val) {
      if (!val.isHave) {
        this.showToast = true
        return
      }
      this.$router.push({
        name: 'goodsDetail',
        params: {
          routerType: 'push'
        },
        query: {
          goodsId: val.id,
        }
      })
    },
    onClose () {
      this.showToast = false
    }
  },
  created () {
    this.getGoodsDatas()
    this.selectlayoutTypeData = this.layoutTypeDatas[0]
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/variable.scss";
.goods-list-page {
  width: 100%;
  height: 100%;
  background: $bgColor;
  display: flex;
  flex-direction: column;
  position: absolute;
  .toast {
    width: px2rem(250);
    height: px2rem(200);
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: px2rem(10);
    font-size: px2rem(30);
    text-align: center;
    line-height: px2rem(200);
    color: $MainColor;
  }
  &-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
</style>